const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');

module.exports = require('./webpack.base.babel')({
    mode: 'development',

    // 在开发环境中添加热重新加载
    entry: [
        // 让ie11兼容react app
        require.resolve('react-app-polyfill/ie11'),
        // 必须这么写，这将连接到服务器，以便在包重新构建时接收通知，然后相应地更新客户端
        'webpack-hot-middleware/client?reload=true',
        path.join(process.cwd(), 'app/app.js'), // 入口文件 app/app.js
    ],

    // 不要在开发模式下使用哈希来获得更好的性能
    output: {
        filename: '[name].js',
        chunkFilename: '[name].chunk.js',
    },

    optimization: {
        // SplitChunks插件是Webpack中一个提取或分离代码的插件，
        // 主要作用是提取公共代码，防止代码被重复打包，拆分过大的js文件，合并零散的js文件。
        splitChunks: {
            chunks: 'all', // 不管异步加载还是同步加载的模块都提取出来，打包到一个文件中。
        },
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(), // 告诉webpack我们需要热重新加载
        new HtmlWebpackPlugin({
            inject: true, // 注入webpack生成的所有文件，例如bundle.js
            template: 'app/index.html',
        }),
        new CircularDependencyPlugin({
            exclude: /a\.js|node_modules/, // 排除检测符合正则的文件
            failOnError: false, // 向 webpack 输出错误而不是警告
        }),
    ],

    // 将会生成source-map 供浏览器调试中source展示
    devtool: 'eval-source-map',

    performance: {
        hints: false, // 关闭提示用户包的体积过大
    },
});
